<template>
  <div id="goods-detail">
    <!-- 头部商品图片和返回菜单 -->
    <div class="top-goodsDetail_img">
      <div class="introduce_img">
        <img :src="singleGoodsList.image" alt />
      </div>
      <div class="top-back">
        <div class="go_back" @click="goBack">
          <van-icon name="arrow-left" />
        </div>
        <div class="message"></div>
      </div>
    </div>
    <!-- 标题栏 -->
    <div class="price-title_item">
      <div class="title">
        <p>
          <span>自营</span>{{singleGoodsList.name}}
        </p>
      </div>
      <div class="fx-flag">
        <div class="fx">
          <img src="../../images/fenxiang.png" alt />
        </div>
        <p>分享</p>
      </div>
    </div>
    <!-- 价格栏 -->
    <div class="price-title_itemSecond">
      <div class="price">
        <p>
          <span class="flag_1">￥</span>{{singleGoodsList.price}}
          <span class="flag_2"></span>
        </p>
      </div>
      <div class="notice-price">降价通知</div>
    </div>
    <!-- 快递地址 -->
    <div class="address-count_item">
      <span class="kd">快递：0.00</span>
      <span class="sale-count">库存{{singleGoodsList.stock}}</span>
      <span class="address">{{singleGoodsList.address}}</span>
    </div>
    <!-- 促销活动 -->
    <div class="promote-sales">
      <div class="title">
        促销
        <span>满赠</span>
      </div>
      <div class="title-intro">
        指定商品满￥199，可赠以下任一商品，赠
        完即止，每单仅享一次
      </div>
      <div class="last-title">已领完</div>
    </div>
    <!-- 添加购物车 -->
    <div class="add-car">
      <div class="car-flag"></div>
      <div class="add-handle">
        <van-stepper
          v-model="value"
          step="1"
          integer
          input-width="60px"
          button-size="32px"
          min="1"
          :max="singleGoodsList.stock"
          @change="onChange(value)"
        />
      </div>
      <div class="add-btn" @click="addCar">加入购物车</div>
      <!-- 小球动画 -->
      <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
        <div class="ball" v-if="ballFlag" ref="ball"></div>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //购物车计步器的值
      value: 1,
      ballFlag: false,
      singleGoodsList:{}
    };
  },
  created(){
      //获取商品数据
      this.getSingleGoodList();
  },
  methods: {
    //购物车添加减少onchange事件
    onChange(value) {
      console.log(value);
    },
    //返回上一页
    goBack(){
        this.$router.go(-1);
    },
    addCar() {
        // 小球动画
      this.ballFlag = !this.ballFlag;
      //赋值购物车数据
      let goodsInfo = {id:this.singleGoodsList.id,count:this.value,price:this.singleGoodsList.price,src:this.singleGoodsList.image,name:this.singleGoodsList.name,allPrice:0};
      //调用store同步共享数据
      this.$store.commit("changeGoods",goodsInfo);
      //共享完数据把goods保存在本地数据中
      localStorage.setItem("goods",JSON.stringify(this.$store.state.goods))
    },
    getSingleGoodList(){
        this.$http.get(`http://172.20.10.4:5000/search?id=${this.$route.params.id}`).then(r=>{
            if(r.body.code==200){
                this.singleGoodsList = r.body.data;
            }
        })
    },


    beforeEnter(el) {
      el.style.transform = "translate(0, 0)";
    },
    enter(el, done) {
      el.offsetWidth;
      let ballH = this.$refs.ball.getBoundingClientRect().top;
      let infoH = document
        .querySelector("#app .van-info")
        .getBoundingClientRect().top;
      let H = infoH - ballH;
      let ballW = this.$refs.ball.getBoundingClientRect().left;
      let infoW = document
        .querySelector("#app .van-info")
        .getBoundingClientRect().left;
      let W = ballW - infoW;
      el.style.transform = `translate(-${W}px, ${H}px)`;
      el.style.transition = "all .5s cubic-bezier(.17,.67,.83,.67)";
      done();
    },
    afterEnter(el) {
      this.ballFlag = !this.ballFlag;
    }
  }
};
</script>
<style lang="less" scoped>
#goods-detail {
  margin-bottom: 2rem;
  .top-goodsDetail_img {
    position: relative;
    .introduce_img {
      background-color: #fff;
      padding-top: 1.2rem;
      img {
        width: 100%;
      }
    }
    .top-back {
      top: 0.6rem;
      position: absolute;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      .go_back {
        margin-left: 0.25rem;
        .van-icon {
          color: #ffa11b;
          font-size: 0.5rem;
        }
      }
      .message {
        margin-right: 0.25rem;
        width: 0.44rem;
        height: 0.44rem;
        background: url("../../images/orange-message.png") no-repeat center
          center;
        background-size: 0.44rem 0.44rem;
      }
    }
  }
  .price-title_item {
    background-color: #fff;
    width: 100%;
    padding: 0.2rem 0.25rem;
    display: flex;
    .title {
      width: 80%;
      p {
        margin-bottom: 0;
        font-size: 0.32rem;
        line-height: 0.4rem;
        color: #000a18;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-weight: 700;
        span {
          font-size: 0.2rem;
          color: #ff3c25;
          background-color: #fff;
          margin-right: 0.2rem;
        }
      }
    }
    .fx-flag {
      width: 20%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .fx {
        width: 0.31rem;
        height: 0.36rem;
        margin-left: 0.2rem;
        img {
          width: 100%;
        }
      }
      p {
        margin-top: 0.1rem;
        margin-bottom: 0;
        color: #636972;
        font-size: 0.2rem;
        margin-left: 0.2rem;
      }
    }
  }
  .price-title_itemSecond {
    background-color: #fff;
    width: 100%;
    padding: 0.2rem 0.25rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .notice-price {
      width: 1.4rem;
      height: 0.5rem;
      color: #ff0000;
      text-align: center;
      line-height: 0.5rem;
      font-size: 0.24rem;
      border: 0.01rem solid #ff0000;
      border-radius: 0.05rem;
    }
    .price {
      p {
        margin-bottom: 0;
        color: #ff4d00;
        font-size: 0.48rem;
        span.flag_1 {
          font-size: 0.32rem;
        }
        span.flag_2 {
          font-size: 0.36rem;
        }
      }
    }
  }
  .address-count_item {
    background-color: #fff;
    width: 100%;
    padding: 0rem 0.25rem;
    padding-bottom: 0.1rem;
    border-bottom: 0.01rem solid #ccc;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    span {
      font-size: 0.24rem;
      color: #838383;
    }
  }
  .promote-sales {
    padding: 0.5rem 0.2rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 0.01rem solid #ccc;
    background-color: #fff;
    .title {
      font-size: 0.24rem;
      color: #797979;
      span {
        font-size: 0.22rem;
        padding: 0.1rem 0.1rem;
        background-color: #91a7ff;
        border-radius: 0.05rem;
        margin-left: 0.1rem;
        color: #fff;
      }
    }
    .title-intro {
      font-size: 0.24rem;
      color: #797979;
      line-height: 0.35rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      width: 60%;
    }
    .last-title {
      font-size: 0.24rem;
      color: #26a6e2;
    }
  }
  .add-car {
    background-color: #fff;
    border-top: 0.01rem solid #eee;
    border-bottom: 0.01rem solid #eee;
    margin-top: 0.45rem;
    width: 100%;
    height: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    .car-flag {
      margin-left: 0.45rem;
      width: 0.46rem;
      height: 0.48rem;
      background: url("../../images/car-icon-2.png") no-repeat center center;
      background-size: 0.46rem 0.48rem;
    }
    .add-btn {
      width: 40%;
      height: 100%;
      background-color: #ff3c25;
      color: #fff;
      font-size: 0.3rem;
      text-align: center;
      line-height: 1rem;
    }
    .add-handle {
      /deep/.van-stepper__plus {
        border: 0.01rem solid #ccc;
      }
      /deep/.van-stepper__minus {
        border: 0.01rem solid #ccc;
      }
      /deep/.van-stepper__input {
        margin: 0;
      }
    }
    .ball {
      z-index: 999;
      width: 14px;
      height: 14px;
      background-color: #f44;
      border-radius: 50%;
      position: absolute;
      right: 20%;
    }
  }
}
</style>
